<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>“侨见枫桥”融合监督平台</title>
    <link rel="icon" href="/img/wrc1.png">
    <link rel="stylesheet" href="/largeScreen/css/index.css">
    <link rel="stylesheet" href="/largeScreen/fonts/icomoon.css">
    <link rel="stylesheet" href="/layui/css/layui.css">
</head>

<body>
<div class="viewport">
    <div class="column">
        <div class="overview panel">
            <div class="inner">
                <!-- 筛选 -->
                <div class="filter">
                    <a href="javascript:;" data-key="day365" class="active">365天</a>
                    <a href="javascript:;" data-key="day90">90天</a>
                    <a href="javascript:;" data-key="day60">60天</a>
                    <a href="javascript:;" data-key="day30">30天</a>
                </div>
                <!-- 数据 -->
                <div class="data">
                    <div class="item">
                        <h4 class="evtCount" id="countUp1"></h4>
                        <span>
                                <i class="icon-dot" style="color: #006cff"></i>
                                事件总计
                            </span>
                    </div>
                    <div class="item">
                        <h4 class="resultCount" id="countUp2"></h4>
                        <span>
                                <i class="icon-dot" style="color: #6acca3"></i>
                                综合智治平台
                            </span>
                    </div>
                    <div class="item">
                        <h4 class="evtTypeCount" id="countUp3"></h4>
                        <span>
                                <i class="icon-dot" style="color: #6acca3"></i>
                                12345平台
                            </span>
                    </div>
                    <div class="item">
                        <h4 class="ruleCount" id="countUp4"></h4>
                        <span>
                                <i class="icon-dot" style="color: #006cff"></i>
                                线索总计
                            </span>
                    </div>
                </div>
            </div>
        </div>
        <!--监控-->
        <div class="monitor panel">
            <div class="inner">
                <div class="tabs">
                    <a href="javascript:;" data-index="0" class="active">检索信息列表</a>
                </div>
                <div class="content" style="display: block;">
                    <div class="head">
                        <span class="col">检索类型</span>
                        <span class="col" style="margin-left: -20px">规则名称</span>
                        <span class="col" style="width: 110px">所属乡镇</span>
                        <span class="col" style="margin-right: 30px">登记时间</span>
                    </div>
                    <div class="marquee-view">
                        <div class="marquee">


                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--点位-->
        <div class="point panel">
            <div class="inner">
                <h3>乡镇检索分布统计</h3>
                <div class="chart">
                    <div class="pie"></div>
                    <div class="data">
                        <div class="item">
                            <h4 class="evtCount" id="countUp5"></h4>
                            <span>
                                    <i class="icon-dot" style="color: #ed3f35"></i>
                                    检索总数
                                </span>
                        </div>
                        <div class="item">
                            <h4 class="deptCount" id="countUp6"></h4>
                            <span>
                                    <i class="icon-dot" style="color: #eacf19"></i>
                                    乡镇总数
                                </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="column">
        <!-- 地图 -->
        <div class="map">
            <h3>
                <span class="icon-cube"></span>
                检索数据统计
            </h3>
            <div class="chart">
                <div class="geo"></div>
            </div>
        </div>
        <!-- 用户 -->
        <div class="users panel">
            <div class="inner">
                <h3>本年度检索按月统计</h3>
                <div class="chart">
                    <div class="bar"></div>
                    <div class="data">
                        <div class="item">
                            <h4 id="countUp7"></h4>
                            <span>
                                    <i class="icon-dot" style="color: #ed3f35"></i>
                                    年度总计
                                </span>
                        </div>
                        <div class="item">
                            <h4 id="countUp8"></h4>
                            <span>
                                    <i class="icon-dot" style="color: #eacf19"></i>
                                    近月新增
                                </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="column">
        <!--<div class="order panel">
            <div class="inner">
                &lt;!&ndash; 筛选 &ndash;&gt;
                <div class="filter">
                    <a href="javascript:;" data-key="day365" class="active">365天</a>
                    <a href="javascript:;" data-key="day90">90天</a>
                    <a href="javascript:;" data-key="day60">60天</a>
                    <a href="javascript:;" data-key="day30">30天</a>
                </div>
                &lt;!&ndash; 数据 &ndash;&gt;
                <div class="data">
                    <div class="item">
                        <h4 id="countUp9"></h4>
                        <span>
                                <i class="icon-dot" style="color: #ed3f35;"></i>
                                事件累计(件)
                            </span>
                    </div>
                    <div class="item">
                        <h4 id="countUp10"></h4>
                        <span>
                                <i class="icon-dot" style="color: #eacf19;"></i>
                                检索累计(件)
                            </span>
                    </div>
                </div>
            </div>
        </div>-->
        <!-- 销售额 -->
        <div class="sales panel">
            <div class="inner">
                <div class="caption" style="width: 200px">
                    <h3>检索规则占比</h3>
                </div>
                <div class="ruleBar"></div>
            </div>
        </div>

        <!-- 排行榜 -->
        <div class="top panel">
            <div class="inner">
                <div class="caption" style="width: 200px">
                    <h3>检索类型占比</h3>
                </div>
                <div class="typeBar"></div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="/largeScreen/js/jquery.min.js"></script>
<script src="/largeScreen/js/echarts.min.js"></script>
<script src="/largeScreen/js/countUp.js"></script>
<script src="/largeScreen/js/index.js"></script>
<script src="/largeScreen/js/china.js"></script>
<script src="/largeScreen/js/mymap.js"></script>
<script src="/layui/layui.js"></script>
<script>
    let EvtCount = [],EvtResultCount = [], EvtCountAll = [], EvtTypeCount = [], EvtRuleCount = [], EvtYearCount = 0, EvtMonthCount;
    let options;
    let deptId,ruleId;
    init();
    setInterval(function () {
        //每san秒调用点击事件
        init();
        console.log("数据刷新");
    }, 1000*60*5);

    function init() {
        selectEvt();
        setMapData();
        setDeptData();
        setEvtYear();
        setEvtCountAll();
        count();
        setResultYearCount();
        setResultYearCountAll();
    }

    function count() {
        $.ajax({
            type: "post",
            url: "/largeScreen/selectEvtCountAll",
            dataType: "json",
            success: function (data) {
                EvtCountAll = data;
                options = {
                    useEasing: true, // 是否启用缓动效果
                    useGrouping: true, // 是否启用千分位分组
                    separator: ',', // 千位分隔符
                    decimal: '.', // 小数点
                    prefix: '', // 前缀
                    suffix: '' // 后缀
                };

                new CountUp('countUp1', 0, data[3].value, 0, 2.5, options).start(); // countUp 参数解释
                new CountUp('countUp2', 0, data[11].value, 0, 2.5, options).start();
                new CountUp('countUp3', 0, data[15].value, 0, 2.5, options).start();
                new CountUp('countUp4', 0, data[7].value, 0, 2.5, options).start();
                new CountUp('countUp5', 0, EvtResultCount.resultCount, 0, 2.5, options).start();
                new CountUp('countUp6', 0, EvtCount.length, 0, 2.5, options).start();
                new CountUp('countUp7', 0, EvtYearCount, 0, 2.5, options).start();
                new CountUp('countUp8', 0, EvtMonthCount, 0, 2.5, options).start();
                var dataList = {
                    day365: {evtCount: data[3].value,evtPtCount1:data[11].value,evtPtCount2:data[15].value,resultCount: data[7].value},
                    day90: {evtCount: data[2].value,evtPtCount1:data[10].value,evtPtCount2:data[14].value,resultCount: data[6].value},
                    day60: {evtCount: data[1].value,evtPtCount1:data[9].value,evtPtCount2:data[13].value,resultCount: data[5].value},
                    day30: {evtCount: data[0].value,evtPtCount1:data[8].value,evtPtCount2:data[12].value,resultCount: data[4].value},
                }
                //点击事件
                $('.overview').on('click', '.filter a', function () {
                    //点击之后加类名
                    $(this).addClass('active').siblings().removeClass('active');
                    // 先获取点击a的 data-key自定义属性
                    var key = $(this).attr('data-key');
                    //获取自定义属性
                    // data{}==>data.shuxing data['shuxing]
                    key = dataList[key];//
                    $('.overview .item h4:eq(0)').text(key.evtCount);
                    $('.overview .item h4:eq(1)').text(key.evtPtCount1);
                    $('.overview .item h4:eq(2)').text(key.evtPtCount2);
                    $('.overview .item h4:eq(3)').text(key.resultCount);
                    new CountUp('countUp1', 0, key.evtCount, 0, 2.5, options).start(); // countUp 参数解释
                    new CountUp('countUp2', 0, key.evtPtCount1, 0, 2.5, options).start();
                    new CountUp('countUp3', 0, key.evtPtCount2, 0, 2.5, options).start();
                    new CountUp('countUp4', 0, key.resultCount, 0, 2.5, options).start();
                });
                //定时器
                /*var index = 0;
                var aclick = $('.overview a');
                setInterval(function () {
                    index++;
                    if (index > 3) {
                        index = 0;
                    }
                    //每san秒调用点击事件
                    aclick.eq(index).click();
                }, 10000);*/
            }
        })
    }

    function selectEvt() {
        $.ajax({
            type: "post",
            url: "/largeScreen/selectEvt",
            dataType: "json",
            data: {"deptId": deptId,"ruleId": ruleId},
            success: function (data) {
                if (data) {
                    let strHtml = "";
                    data.forEach(function (item) {
                        strHtml += "<div class=\"row\" id='"+item.id+"' onmouseenter='getMes2("+item.id+",this)' onmouseleave='getMes3()'><a style='display: none'>"+item.contents+"</a>" +
                            "<span class=\"col\" style='cursor: pointer;width: 180px' onclick='getMes(" + item.id + ")'>" + item.typeName + "</span>" +
                            "<span class=\"col\" style='width: 80px'>" + item.ruleName + "</span>" +
                            "<span class=\"col\" style='margin-right: 50px'>" + item.deptName + "</span>" +
                            "<span class=\"col\">" + item.reportTime + "</span>" +
                            "<span class=\"icon-dot\"></span>" +
                            "</div>"
                    })
                    $(".marquee").html(strHtml);
                    let time_a=0.6*data.length;
                    $(".marquee").css("animation","row  "+time_a+"s linear infinite")
                }
            }
        })
    }
    function getMes(id) {
        layui.use(function(){
            var layer = layui.layer;
            layer.open({
                type: 2,
                area: [1800 + 'px', 900 + 'px'],
                fix: false,
                //不固定
                maxmin: true,
                shade: 0.3,
                title: "详细信息",
                content: "/system/evt/view/"+id,
                // 弹层外区域关闭
                shadeClose: true,
                yes: function (index, layero) {
                    var iframeWin = layero.find('iframe')[0];
                    iframeWin.contentWindow.submitHandler(index, layero);
                },
                cancel: function (index) {
                    return true;
                },
                success: function () {
                    $(':focus').blur();
                }
            })
        });
    }
    let tip;
    function getMes2(id,obj) {
        let contents=$(obj)[0].children[0].innerHTML;
        layui.use(function() {
            var layer = layui.layer;
            tip=layer.tips(contents, '#' + id, {
                tips: 2, // 支持 1-4 可选值，更多详见基础属性中的 tips 介绍
                time:0
            });
        })
    }
    function getMes3() {
        layui.use(function() {
            var layer = layui.layer;
            layer.close(tip);
        })
    }

    function setMapData() {
        /*$.ajax({
            type: "post",
            url: "/largeScreen/selectEvtCount",
            dataType: "json",
            async: false,
            success: function (data) {
                EvtCount = data;
                if (data) {
                    data.forEach(function (item) {
                        deptArr.forEach(function (item1) {
                            if (item1.name === item.name) {
                                item1.value = item.value;
                            }
                        })
                    })
                }
            }
        })*/
        $.ajax({
            type: "post",
            url: "/largeScreen/selectSearchResultCount",
            dataType: "json",
            async: false,
            success: function (data) {
                if (data) {
                    data.forEach(function (item) {
                        deptArr2.forEach(function (item1) {
                            if (item1.name === item.name) {
                                item1.value = item.value;
                                item1.deptId = item.deptId;
                            }
                        })
                        EvtCount=deptArr2;
                    })
                }
            }
        })
        let num=[];
        for (let i=0;i<deptArr2.length;i++){
            num.push(deptArr2[i].value);
        }
        option_map.visualMap = {
            min: 0,
            max: Math.max.apply(null,num),
            text: ['高', '低'],
            realtime: false,
            calculable: true,
            inRange: {
                color: color
            },
            textStyle: {
                color: '#fff'
            }
        };
        option_map.series = [
            {
                name: '检索总数',
                type: 'map',
                map: 'qt',
                label: {
                    show: true,
                    color: '#fff',
                },
                zoom: 1.2,
                data: deptArr2
            }];
        option_map.tooltip = {
            trigger: 'item',
            formatter: function (params) {
                //定义一个res变量来保存最终返回的字符结果,并且先把地区名称放到里面
                var res = params.name + '<br />';
                //定义一个变量来保存series数据系列
                var myseries = option_map.series;
                //循环遍历series数据系列
                for (var i = 0; i < myseries.length; i++) {
                    //在内部继续循环series[i],从data中判断：当地区名称等于params.name的时候就将当前数据和名称添加到res中供显示
                    for (var k = 0; k < myseries[i].data.length; k++) {
                        //console.log(myseries[i].data[k].name);
                        //如果data数据中的name和地区名称一样
                        if (myseries[i].data[k].name == params.name) {
                            //将series数据系列每一项中的name和数据系列中当前地区的数据添加到res中
                            res += myseries[i].name + '：' + myseries[i].data[k].value + '件<br />';
                        }
                    }
                }
                //返回res
                //console.log(res);
                return res;
            },
            backgroundColor: 'rgba(0,0,0,0.5)',
            textStyle: {
                color: '#fff'
            }
        }
        myecharts.setOption(option_map);
        myecharts.on("click", (value) => {
            deptId=value.data.deptId;
            selectEvt();
            setTimeout(function (){
                deptId="";
                ruleId="";
                selectEvt();
            },1000*60*5)
        });
    }

    function setDeptData() {
        var myechart2 = echarts.init($('.pie')[0]);
        option = {
            // 控制提示
            tooltip: {
                // 非轴图形，使用item的意思是放到数据对应图形上触发提示
                trigger: 'item',
                // 格式化提示内容：
                // a 代表图表名称 b 代表数据名称 c 代表数据  d代表  当前数据/总数据的比例
                formatter: "{a} <br/>{b} : {c} 件({d}%)",
                backgroundColor: 'rgba(0,0,0,0.5)',
                textStyle: {
                    color: '#fff'
                }
            },
            // 控制图表
            series: [
                {
                    // 图表名称
                    name: '乡镇检索分布统计',
                    // 图表类型
                    type: 'pie',
                    // 南丁格尔玫瑰图 有两个圆  内圆半径10%  外圆半径70%
                    // 百分比基于  图表DOM容器的半径
                    radius: ['10%', '80%'],
                    center: ['50%', '50%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    // 数据集 value 数据的值 name 数据的名称
                    data: EvtCount,
                    //文字调整
                    label: {
                        fontSize: 14
                    },
                    //引导线
                    labelLine: {
                        length: 8,
                        length2: 10
                    }
                }
            ],
            color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff']
        };
        myechart2.setOption(option);
    }

    function setEvtYear() {
        $.ajax({
            type: "post",
            url: "/largeScreen/selectResultYearCount",
            dataType: "json",
            async: false,
            success: function (data) {
                let month = [];
                let count = [];
                EvtYearCount=0;
                EvtMonthCount=0;
                if (data) {
                    data.forEach(function (item) {
                        month.push(item.name + "月");
                        count.push(item.value);
                        EvtYearCount += Number(item.value);
                        EvtMonthCount = Number(item.value);
                    })
                }
                var item = {
                    name: '',
                    value: 1200,
                    // 柱子颜色
                    itemStyle: {
                        color: '#254065'
                    },
                    // 鼠标经过柱子颜色
                    emphasis: {
                        itemStyle: {
                            color: '#254065'
                        }
                    },
                    // 工具提示隐藏
                    tooltip: {
                        extraCssText: 'opacity:0'
                    }
                };
                let option2 = {
                    // 工具提示
                    tooltip: {
                        // 非轴图形，使用item的意思是放到数据对应图形上触发提示
                        trigger: 'item',
                        // 格式化提示内容：
                        // a 代表图表名称 b 代表数据名称 c 代表数据  d代表  当前数据/总数据的比例
                        formatter: "{a} <br/>{b} : {c} 件",
                        backgroundColor: 'rgba(0,0,0,0.5)',
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    // 图表边界控制
                    grid: {
                        // 距离 上右下左 的距离
                        left: '0',
                        right: '3%',
                        bottom: '3%',
                        top: '5%',
                        // 大小是否包含文本【类似于boxsizing】
                        containLabel: true,
                        //显示边框
                        show: true,
                        //边框颜色
                        borderColor: 'rgba(0, 240, 255, 0.3)'
                    },
                    // 控制x轴
                    xAxis: [
                        {
                            // 使用类目，必须有data属性
                            type: 'category',
                            // 使用 data 中的数据设为刻度文字
                            data: month,
                            // 刻度设置
                            axisTick: {
                                // true意思：图形在刻度中间
                                // false意思：图形在刻度之间
                                alignWithLabel: false,
                                show: false
                            },
                            //文字
                            axisLabel: {
                                color: '#4c9bfd'
                            }
                        }
                    ],
                    // 控制y轴
                    yAxis: [
                        {
                            // 使用数据的值设为刻度文字
                            type: 'value',
                            axisTick: {
                                // true意思：图形在刻度中间
                                // false意思：图形在刻度之间
                                alignWithLabel: false,
                                show: false
                            },
                            //文字
                            axisLabel: {
                                color: '#4c9bfd'
                            },
                            splitLine: {
                                lineStyle: {
                                    color: 'rgba(0, 240, 255, 0.3)'
                                }
                            },
                        }
                    ],
                    // 控制x轴
                    series: [

                        {
                            // series配置
                            // 颜色
                            itemStyle: {
                                // 提供的工具函数生成渐变颜色
                                color: new echarts.graphic.LinearGradient(
                                    // (x1,y2) 点到点 (x2,y2) 之间进行渐变
                                    0, 0, 0, 1,
                                    [
                                        {offset: 0, color: '#00fffb'}, // 0 起始颜色
                                        {offset: 1, color: '#0061ce'}  // 1 结束颜色
                                    ]
                                )
                            },
                            // 图表数据名称
                            name: '本年度检索统计',
                            // 图表类型
                            type: 'bar',
                            // 柱子宽度
                            barWidth: '60%',
                            // 数据
                            data: count
                        }
                    ]
                };
                var myechart = echarts.init($('.users .bar')[0]);
                myechart.setOption(option2);
            }
        })

    }

    function setEvtCountAll() {
        $.ajax({
            type: "post",
            url: "/largeScreen/count",
            dataType: "json",
            async: false,
            success: function (data) {
                EvtResultCount = data;

            }
        })

    }

    function setResultYearCount() {
        $.ajax({
            type: "post",
            url: "/largeScreen/selectResultRule",
            dataType: "json",
            async: false,
            success: function (data) {
                EvtRuleCount = data;
            }
        })
        var data = [];
        EvtRuleCount.forEach(function (item) {
            data.push(item.name);
        })
        let option3 = {
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%) 件',
                backgroundColor: 'rgba(0,0,0,0.5)',
                textStyle: {
                    color: '#fff'
                }
            },
            legend: {
                data: data,
                textStyle: {
                    color: '#4c9bfd',// 图例文字颜色
                    fontSize: 14
                }
            },
            series: [
                {
                    name: '检索规则占比',
                    type: 'pie',
                    radius: ['0%', '60%'],
                    center: ['50%', '50%'],
                    labelLine: {
                        length: 30
                    },
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        formatter: '{b|{b}}{abg|}\n{hr|}\n  {c} 件  {per|{d}%}  ',
                        backgroundColor: '#F6F8FC',
                        borderColor: '#8C8D8E',
                        borderWidth: 1,
                        borderRadius: 4,
                        rich: {
                            hr: {
                                borderColor: '#8C8D8E',
                                width: '100%',
                                borderWidth: 1,
                                height: 0
                            },
                            b: {
                                color: '#4C5058',
                                fontSize: 12,
                                fontWeight: 'bold',
                                lineHeight: 25,
                                align: 'center'
                            },
                            c: {
                                color: '#4C5058',
                                fontSize: 14,
                                fontWeight: 'bold',
                                lineHeight: 25
                            },
                            per: {
                                color: '#fff',
                                backgroundColor: '#4C5058',
                                padding: [3, 4],
                                lineHeight: 25,
                                borderRadius: 4
                            }
                        }
                    },
                    data: EvtRuleCount
                }
            ]
        };
        var myechart3 = echarts.init($('.ruleBar')[0]);
        myechart3.setOption(option3);
        myechart3.on("click", (value) => {
            ruleId=value.data.ruleId;
            selectEvt();
            setTimeout(function (){
                deptId="";
                ruleId="";
                selectEvt();
            },1000*60*5)
        });
    }

    function setResultYearCountAll() {
        $.ajax({
            type: "post",
            url: "/largeScreen/selectResultType",
            dataType: "json",
            async: false,
            success: function (data) {
                EvtTypeCount = data;
            }
        })
        var data = [];
        EvtTypeCount.forEach(function (item) {
            data.push(item.name);
        })
        let option4 = {
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} 件({d}%) ',
                backgroundColor: 'rgba(0,0,0,0.5)',
                textStyle: {
                    color: '#fff'
                }
            },
            legend: {
                data: data,
                textStyle: {
                    color: '#4c9bfd',// 图例文字颜色
                    fontSize: 14
                }
            },
            series: [
                {
                    name: '检索类型占比',
                    type: 'pie',
                    radius: ['0%', '60%'],
                    labelLine: {
                        length: 30
                    },
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        formatter: '{b|{b}}{abg|}\n{hr|}\n  {c} 件  {per|{d}%}  ',
                        backgroundColor: '#F6F8FC',
                        borderColor: '#8C8D8E',
                        borderWidth: 1,
                        borderRadius: 4,
                        rich: {
                            hr: {
                                borderColor: '#8C8D8E',
                                width: '100%',
                                borderWidth: 1,
                                height: 0
                            },
                            b: {
                                color: '#4C5058',
                                fontSize: 12,
                                fontWeight: 'bold',
                                lineHeight: 25,
                                align: 'center'
                            },
                            c: {
                                color: '#4C5058',
                                fontSize: 14,
                                fontWeight: 'bold',
                                lineHeight: 25
                            },
                            per: {
                                color: '#fff',
                                backgroundColor: '#4C5058',
                                padding: [3, 4],
                                lineHeight: 25,
                                borderRadius: 4
                            }
                        }
                    },
                    data: EvtTypeCount
                }
            ]
        };
        var myechart = echarts.init($('.typeBar')[0]);
        myechart.setOption(option4);
    }
</script>
</html>